<template>
  <div class="shijian-container block bordered">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="shijian-header">
      <h1>异常事件</h1>
    </div>
    <div class="shijian-body">
      <div class="shijian-table">
        <dl>
          <dd>企业名称</dd>
          <dd>设备名称</dd>
          <dd>设备地址</dd>
          <dd>事件详情</dd>
          <dd>发生时间</dd>
        </dl>
        <div class="marquee">
          <ul ref="shijian-ref">
            <li v-for="item in exceptionList" :key="item.index">
              <div :title="item.companyName">{{item.companyName}}</div>
              <div :title="item.deviceName">{{item.deviceName}}</div>
              <div :title="item.deviceLocation">{{item.deviceLocation}}</div>
              <div :title="item.content">{{item.content}}</div>
              <div :title="moment(item.happenTime).format('YYYY-MM-DD HH:mm:ss')">{{moment(item.happenTime).format("YYYY-MM-DD HH:mm:ss")}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
function Scroll() {}

Scroll.prototype.upScroll = function(dom, _h, interval, callback) {
  if (this.timer) {
    clearInterval(this.timer)
  }
  this.timer = setInterval(function() {
    let _field = dom.firstElementChild
    _field.style.marginTop = '0px'
    dom.appendChild(_field)
    _field = dom.firstElementChild
    _field.style.marginTop = _h
  }, interval)
  if (callback) {
    callback()
  }
}
Scroll.prototype.stopScroll = function(callback) {
  if (this.timer) {
    clearInterval(this.timer)
    callback()
  }
}

import { mapState } from 'vuex'
export default {
  mounted() {
    this.initState()
  },
  data() {
    return {
      mapBottle: null
    }
  },
  computed: {
    ...mapState({
      exceptionList: state => state.cityInfo.exceptionList
    })
  },
  watch: {
    exceptionList() {
      this.initState()
    }
  },
  methods: {
    initState() {
      const dom = this.$refs['shijian-ref']
      let flagMouseover = true
      let flagMouseout = true
      this.$nextTick(() => {
        if (dom) {
        }
        const myScroll = new Scroll()
        myScroll.upScroll(dom, '-38px', 2000)
        dom.addEventListener('mouseover', function() {
          if (flagMouseover) {
            setTimeout(() => {
              flagMouseover = false
              myScroll.stopScroll(() => {
                flagMouseover = true
              })
            }, 500)
          }
        })
        dom.addEventListener('mouseout', function() {
          if (flagMouseout) {
            setTimeout(() => {
              flagMouseout = false
              myScroll.upScroll(dom, '-38px', 2000, () => {
                flagMouseout = true
              })
            }, 500)
          }
        })
      })
    }
  }
}
</script>

